<template>
  <div class="tab">
    <div class="tab-box">
      <div class="tab-index" @click="handleToPage(tabbar[0].name)">
        <img
          :src="
            page === tabbar[0].name ? tabbar[0].iconSelected : tabbar[0].icon
          "
          class="tab-icon"
        />
        <div class="tab-name">{{ tabbar[0].text }}</div>
      </div>
      <div class="tab-index" @click="handleToPage(tabbar[1].name)">
        <img
          :src="
            page === tabbar[1].name ? tabbar[1].iconSelected : tabbar[1].icon
          "
          class="tab-icon"
        />
        <div class="tab-name">{{ tabbar[1].text }}</div>
      </div>
      <div class="tab-index" @click="handleToPage(tabbar[2].name)">
        <div class="scan-bg-border">
          <div class="tools-bg scan">
            <div class="scan-animation">
              <div class="scan-bg"></div>
              <div class="scan-animation-node"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-index" @click="handleToPage(tabbar[3].name)">
        <img
          :src="
            page === tabbar[3].name ? tabbar[3].iconSelected : tabbar[3].icon
          "
          class="tab-icon"
        />
        <div class="tab-name">{{ tabbar[3].text }}</div>
      </div>
      <div class="tab-index" @click="handleToPage(tabbar[4].name)">
        <img
          :src="
            page === tabbar[4].name ? tabbar[4].iconSelected : tabbar[4].icon
          "
          class="tab-icon"
        />
        <div class="tab-name">{{ tabbar[4].text }}</div>
      </div>
      <!-- 其余tab-index的div保持不变，只是将image标签改为img标签 -->
      <!-- ... -->
    </div>
  </div>
</template>  
  
<script>  
export default {
  props: {
    pageName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      page: this.pageName,
      tabbar: [
        { text: "首页", icon: require("@/static/tabbar/index.png"), name: "index", iconSelected: require("@/static/tabbar/index-selected.png") },
        { text: "找站", icon: require("@/static/tabbar/electric.png"), name: "stationList", iconSelected: require("@/static/tabbar/electric-selected.png") },
        { text: "", icon: "", name: "voucherVerify", iconSelected: "" },
        { text: "订单", icon: require("@/static/tabbar/order.png"), name: "orderList", iconSelected: require("@/static/tabbar/order-selected.png") },
        { text: "我的", icon: require("@/static/tabbar/my.png"), name: "sysUserInfo", iconSelected: require("@/static/tabbar/my-selected.png") }
      ]
    };
  },
  methods: {
    handleToPage(pageName) {
      if (pageName === 'voucherVerify') {
        this.scanClick();
      } else {
        uni.switchTab({
          url: `/pages/${pageName}/${pageName}`
        });
      }
    },
    // 点击扫描二维码
    scanClick: function () {
      // 允许从相机和相册扫码
      uni.scanCode({
        success: (res) => {
          //console.log(res)
          if ('scanCode:ok' === res.errMsg) {
            if (res.result) {
              let code;
              if (requestUtil.getQueryString(res.result, 'code')) {
                code = requestUtil.getQueryString(res.result, 'code');
              } else {
                code = res.result;
              }

              //拼接 选择跳转
              if (code.indexOf('_') > 0) {
                var codeAr = code.split('_');
                var preCode = codeAr[0];
                var sub = parseInt(codeAr[1]);
                code = preCode + (sub < 10 ? '_0' + sub : '_' + sub);
              }
              let url = '';
              if (code.indexOf('_') > 0) {
                if (code.slice(0, 2) == 10) {
                  //新协议10开头，只给电瓶车使用
                  //url = "/pages/tidDPCSelMoney/tidDPCSelMoney?device_code=" + code
                } else {
                }
                //国控小程序不用判断跳转电瓶车
                url = '/pages/tidNEWSelMoney/tidNEWSelMoney?device_code=' + code;
              } else {
                url = '/pages/tidOLDSelMoney/tidOLDSelMoney?device_code=' + code;
              }
              console.log(url);
              uni.navigateTo({
                url: url
              });
            }
          }
        }
      });
    }
  },
  mounted() {
    // 如果需要根据用户角色动态设置tabbar，可以在这里添加逻辑  
    // 例如：  
    // if (getUserRole() === '店长' || getUserRole() === '收银员') {  
    //   // 设置tabbar  
    // } else {  
    //   // 设置其他tabbar  
    // }  
  }
};  
</script>  
<style lang='scss' scoped>
/* custom-tab-bar/index.wxss */
.van-tabbar-item {
  --tabbar-item-margin-bottom: 0;
}
.scan-bg-border {
  width: 100rpx;
  height: 100rpx;
  position: relative;
  /* border: 1px solid red; */
  z-index: 999;
  margin-bottom: 40rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 10rpx solid #fff;
}
.tools-bg {
  /* background: red; */
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-bottom: 10rpx; */
}
.scan {
  /* position: relative; */
  /* border: 15rpx solid #fff; */
  background: linear-gradient(to bottom right, #ff7200, #f5c16f);
  /* margin-bottom: 40rpx; */
  /* z-index: 9999; */
}
/* 应用动画到元素上 */
.scan-animation {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  margin: auto;
  border-radius: 4rpx;
  background: linear-gradient(to left, #ffffff, #ffffff) left top no-repeat,
    linear-gradient(to bottom, #ffffff, #ffffff) left top no-repeat,
    linear-gradient(to left, #ffffff, #ffffff) right top no-repeat,
    linear-gradient(to bottom, #ffffff, #ffffff) right top no-repeat,
    linear-gradient(to left, #ffffff, #ffffff) left bottom no-repeat,
    linear-gradient(to bottom, #ffffff, #ffffff) left bottom no-repeat,
    linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat,
    linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat;
  background-size: 2px 6px, 6px 2px, 2px 6px, 6px 2px;
}

.scan-bg {
  /* width: 30rpx;
  height: 38rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 6rpx;
  transform: translateX(-50%) translateY(-50%); */
  /* animation: bg 2s infinite ease-in-out; */
}

.scan-animation-node {
  width: 30rpx;
  height: 4rpx;
  border-radius: 4rpx;
  background-color: #fff;
  position: absolute;
  /* top: 15rpx; */
  left: 50%;
  /* transform: translateX(-50%); */
  animation: scan 2s infinite ease-in-out;
}

/* 定义动画名称 */
@keyframes scan {
  0% {
    transform: translateX(-50%) translateY(5rpx);
  }

  50% {
    transform: translateX(-50%) translateY(42rpx);
  }

  100% {
    transform: translateX(-50%) translateY(5rpx);
  }
}
.tab {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0px -10px 20px 0px rgba(153, 153, 153, 0.1);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 2;
  .tab-box {
    display: flex;
    .tab-index,
    .tab-my {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 100rpx;
      .tab-icon {
        width: 50rpx;
        height: 50rpx;
      }
      .tab-scan-icon {
        width: 100rpx;
        height: 100rpx;
        position: relative;
        top: -20rpx;
      }
      .tab-name {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
      }
    }
  }
}
</style>